<template>
    <div>
        <el-form label-position="left" label-width="100px" v-model="simpleMap">
            <el-divider content-position="center">位置</el-divider>
            <el-form-item label="距左侧">
               <el-input v-model="simpleMap.left" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="距右侧">
               <el-input v-model="simpleMap.right" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="距顶部">
               <el-input v-model="simpleMap.top" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="距底部">
               <el-input v-model="simpleMap.bottom" size="mini"></el-input>
            </el-form-item>
            <el-divider content-position="center">普通样式</el-divider>
            <el-form-item label="边框颜色">
              <el-color-picker v-model="simpleMap.itemStyle.normal.borderColor" show-alpha size="small" @active-change="normalBorderColor"></el-color-picker>
            </el-form-item>
            <el-divider content-position="center">强调样式</el-divider>
            <el-form-item label="边框颜色">
              <el-color-picker v-model="simpleMap.itemStyle.emphasis.borderColor" show-alpha size="small" @active-change="emphasisBorderColor"></el-color-picker>
            </el-form-item>
            <el-form-item label="区域颜色">
              <el-color-picker v-model="simpleMap.itemStyle.emphasis.areaColor" show-alpha size="small" @active-change="emphasisAreaColor"></el-color-picker>
            </el-form-item>
            <el-divider content-position="center"></el-divider>
            <el-form-item label="缩放">
              <el-radio v-model="simpleMap.roam" :label="true">开启</el-radio>
              <el-radio v-model="simpleMap.roam" :label="false">关闭</el-radio>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

export default {
  data: function () {
    return {
    }
  },
  methods: {
    normalBorderColor (val) {
      this.simpleMap.itemStyle.normal.borderColor = val
    },
    emphasisBorderColor (val) {
      this.simpleMap.itemStyle.emphasis.borderColor = val
    },
    emphasisAreaColor (val) {
      this.simpleMap.itemStyle.emphasia.areaColor = val
    }
  },
  computed: {
    simpleMap () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.$store.state.insideActiveArrayIndex].itemContent.detail.simpleMap
    }
  },
  watch: {
  },
  components: {
  }
}
</script>

<style scoped>
    .el-form-item {
        margin-bottom: 0px
    }
</style>
